import { XYZ } from 'ol/source';
import TileLayer from "ol/layer/Tile";
// let tdtMapKey = '93b77aa0f3d16b961bd8f9d2cb5bdad2'
let tdtMapKey ='cc7ce3abb37b17aa5395b13b2980287e'
// T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别。
// 使用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile：
//天地图底图
var source = new XYZ({
    url: `http://t4.tianditu.com/DataServer?T=vec_w&tk=${tdtMapKey}key&x={x}&y={y}&l={z}`
});
var tileLayer = new TileLayer({
    id: "tileLayer",
    title: "天地图",
    layerName: "baseMap",
    source: source
});
//标注图层
var sourceMark = new XYZ({
    url: `http://t3.tianditu.com/DataServer?T=cva_w&tk=${tdtMapKey}&x={x}&y={y}&l={z}`
});
var tileMark = new TileLayer({
    id: "tileMark",
    title: "标注图层",
    layerName: "baseMap",
    source: sourceMark,

});
//卫星图像
var sourceSatellite = new XYZ({
    url: `http://t3.tianditu.com/DataServer?T=img_w&tk=${tdtMapKey}&x={x}&y={y}&l={z}`,
    // tileLoadFunction: function (imageTile, src) {
    //     // 使用滤镜 将白色修改为深色
    //     let img = new Image()
    //     // img.crossOrigin = ''
    //     // 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
    //     img.setAttribute('crossOrigin', 'anonymous')
    //     img.onload = function () {
    //         let canvas = document.createElement('canvas')
    //         let w = img.width
    //         let h = img.height
    //         canvas.width = w
    //         canvas.height = h
    //         let context = canvas.getContext('2d')
    //         context.filter = 'grayscale(40%) invert(0%) sepia(0%) hue-rotate(50deg) saturate(100%) brightness(100%) contrast(100%)'
    //         context.drawImage(img, 0, 0, w, h, 0, 0, w, h)
    //         imageTile.getImage().src = canvas.toDataURL('image/png')
    //     }
    //     img.src = src
    // },
});
var tileSatellite = new TileLayer({
    id: "tileSatellite",
    title: "卫星图",
    layerName: "baseMap",
    source: sourceSatellite

});
//天地图地形地图
var map_ter = new TileLayer({
    id: "map_ter",
    title: "天地图地形",
    layerName: "baseMap",
    source: new XYZ({
        url: `http://t4.tianditu.com/DataServer?T=ter_w&tk=${tdtMapKey}&x={x}&y={y}&l={z}`
    })
})
var map_cta = new TileLayer({
    id: "map_cta",
    title: "天地图标注",
    layerName: "baseMap",
    source: new XYZ({
        url: `http://t4.tianditu.com/DataServer?T=cva_w&tk=${tdtMapKey}&x={x}&y={y}&l={z}`
    })
});

export {
    tileLayer,
    tileMark,
    tileSatellite,
    map_ter,
    map_cta
};

